import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WidgetComponent } from '../../models/layout.models';

@Component({
  selector: 'app-table-widget',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="component table-component">
      <div class="component-header">
        <div class="component-title">
          <i class="material-icons">table_chart</i>
          {{widget.title}}
        </div>
        <div class="component-actions">
          <button (click)="onSettings()"><i class="material-icons">settings</i></button>
          <button (click)="onDelete()"><i class="material-icons">delete</i></button>
        </div>
      </div>
      <div class="component-content">
        <table>
          <thead>
          <tr>
            <th>ID</th>
            <th>名称</th>
            <th>状态</th>
            <th>创建时间</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>001</td>
            <td>用户管理</td>
            <td>运行中</td>
            <td>2023-10-01</td>
          </tr>
          <tr>
            <td>002</td>
            <td>订单系统</td>
            <td>已停止</td>
            <td>2023-09-15</td>
          </tr>
          <tr>
            <td>003</td>
            <td>支付网关</td>
            <td>运行中</td>
            <td>2023-10-05</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  `,
  styleUrls: ['./widgets.component.scss']
})
export class TableWidgetComponent {
  @Input() widget!: WidgetComponent;
  @Output() delete = new EventEmitter<void>();

  onSettings() {
    console.log('Settings clicked for widget:', this.widget.id);
  }

  onDelete() {
    this.delete.emit();
  }
}
